<!--
 * @Author: LAB
 * @Date: 2021-05-19 10:12:35
 * @Description: 过滤器
 * @FilePath: \client-app\src\views\drug\components\filter.vue
-->
<template>
  <div class="filter-container">
    <div class="range">
      <p>过滤范围</p>
      <div>
        <DxCheckBox
          v-for="item in drugTypeList"
          v-model:value="item.value"
          width="50%"
          :text="item.name"
          :key="item.id"
        />
      </div>
    </div>
    <div class="input-box">
      <p>药品编码</p>
      <DxTextBox
        styling-mode="outlined"
        placeholder="请输入"
        v-model:value="filterModel.coding"
      />
    </div>
    <div class="input-box">
      <p>药品名称</p>
      <DxTextBox
        styling-mode="outlined"
        placeholder="请输入"
        v-model:value="filterModel.name"
      />
    </div>
    <div class="input-box">
      <p>药品简码</p>
      <DxTextBox
        styling-mode="outlined"
        placeholder="请输入"
        v-model:value="filterModel.drugshortCode"
      />
    </div>
    <div style="position: relative; height: 50px">
      <div class="lb-form-button">
        <DxButton :width="100" text="取消" @click="cancel" />
        <DxButton
          :width="100"
          text="开始过滤"
          type="default"
          @click="submit()"
        />
      </div>
    </div>
    <div>
      <Tree :items="filterList" v-bind="treeOptions" @item-click="itemClick" />
    </div>
  </div>
</template>

<script lang="ts">
import { Options, Vue } from "vue-class-component";
import { Emit, Inject, Prop, Watch } from "vue-property-decorator";
import DxForm from "devextreme-vue/form";
import { DxCheckBox } from "devextreme-vue/check-box";
import DxTextBox from "devextreme-vue/text-box";
import DxButton from "devextreme-vue/button";
import { DrugSortInfoVO, FilterDTO } from "@/api/api_agreementdrugclient";
import { ApiTool } from "@/api/api-tool";
import { DrugSortClient } from "@/api/api_drugclient";
import Tree from "@/framework/components/tree/tree.vue";
import notify from "devextreme/ui/notify";
import { dxTreeViewOptions } from "devextreme/ui/tree_view";
import { SearchByURL } from "@/framework/utils/search-byurl";

@Options({
  components: {
    DxForm,
    DxCheckBox,
    DxTextBox,
    DxButton,
    Tree,
  },
})
export default class Filter extends Vue {
  // 目录id
  get drugSortId() {
    return (this.$route.query.drugSortId || "") as string;
  }
  // 方案id
  get drugSchemeId() {
    return (this.$route.query.drugSchemeId || "") as string;
  }
  // 父目录id
  get parentId() {
    return (this.$route.query.parentId || "") as string;
  }
  // 药品id
  get drugId() {
    return (this.$route.query.drugId || "") as string;
  }

  drugTypeList = [
    { id: 1, name: "西成药", value: true },
    { id: 2, name: "中成药", value: true },
    { id: 3, name: "中草药", value: true },
  ];
  filterModel: FilterDTO = {};

  @Inject()
  apiTool: ApiTool;

  searchByURL: SearchByURL;

  client: DrugSortClient;
  created() {
    this.searchByURL = new SearchByURL(this.$router);
    this.client = this.apiTool.createClient(DrugSortClient);
    this.getLevel1Catelog();
  }
  @Watch("drugSchemeId")
  initData() {
    this.getLevel1Catelog();
  }

  // 取消
  cancel() {
    this.filterModel = {};
    this.drugTypeList = this.setSelectDrugType();
    this.filterList = [
      {
        drugSortId: "00000000-0000-0000-0000-000000000000",
        parentId: "",
        name: "过滤结果",
      },
    ];
  }

  filterList: DrugSortInfoVO[] = [
    {
      drugSortId: "00000000-0000-0000-0000-000000000000",
      parentId: "",
      name: "过滤结果",
    },
  ];

  // 新建过滤器
  submit(filterModel = this.filterModel) {
    filterModel.types = this.getSelectDrugType();
    this.client.getFilterPageList(filterModel).then((res) => {
      if (res.isSuccess) {
        let listData = res.listData.map((item) => {
          return {
            ...item,
            expanded: true,
          };
        });
        this.filterList = listData.concat({
          drugSortId: "00000000-0000-0000-0000-000000000000",
          parentId: "",
          name: "过滤结果",
          expanded: true,
        });
      } else {
        notify(res.message, "error", 2000);
      }
    });
  }

  // 获取选中值
  getSelectDrugType(list = this.drugTypeList) {
    let result: any = [];
    list.forEach((item) => {
      if (item.value) {
        result.push(item.id);
      }
    });
    return result;
  }

  // 重置选中durgType
  setSelectDrugType(list = this.drugTypeList) {
    return list.map((item) => {
      return {
        ...item,
        value: true,
      };
    });
  }

  // 获取一级分类
  getLevel1Catelog() {
    if (!this.drugSchemeId) {
      return;
    }
    this.client
      .getFirstListPageWithDrugSchemeId(this.drugSchemeId)
      .then((result) => {
        if (result.isSuccess) {
          this.drugTypeList = result.listData.map((item) => {
            return {
              id: item.type,
              name: item.name,
              value: true,
            };
          });
        }
      });
  }
  // 过滤药品
  itemClick(e: { itemData: { drugSortId: string } }) {
    let drugSortId = e.itemData.drugSortId;
    let { coding, name, drugShortCode } = this.filterModel;
    let params = {
      drugSortId:
        drugSortId == "00000000-0000-0000-0000-000000000000" ? "" : drugSortId,
      filterCoding: coding,
      filterName: name,
      filterDrugShortCode: drugShortCode,
    };
    this.searchByURL.setParamsToUrl(params);
  }

  treeOptions: dxTreeViewOptions = {
    width: 230,
    selectionMode: "single",
    rootValue: "",
  };
}
</script>

<style lang="scss" scoped>
.filter-container {
  padding: 12px 19px;
  .range {
    display: flex;
    align-items: flex-start;
    p {
      word-break: keep-all;
      padding: 9px;
    }
    > div {
      display: flex;
      width: 180px;
      flex-wrap: wrap;
      // >div{
      //   width: 50%;
      // }
    }
  }
  .input-box {
    display: flex;
    margin-bottom: 12px;
    p {
      padding: 9px;
    }
  }
}
</style>
<style lang="scss">
.filter-container {
  background-color: #eee;
  .range {
    > div {
      > div {
        width: 50%;
        margin: 12px 0;
      }
    }
  }
}
</style>